<!-- 首页 -->
<template>
  <div class='app-container'>
        <el-button type="success" @click="dialogAddVisible = true" icon="el-icon-plus">添加</el-button>
        <myTable ref="mytable"
               :config="tableconfig"
               @handleSelectChange="handleSelectChange">
        <div slot="mytablebody">
        </div>
        <!-- 图片 -->
        <template v-slot:picture="{ data }">
            <el-image style="width: 100%; height: 40px" :src="data.picture"></el-image>
        </template>
        <!-- 图片路径 -->
        <template v-slot:picturePath="{ data }"> 
            <el-link class="blue-link" :underline="false">
                {{data.picturePath}}
            </el-link>
        </template>
        <!-- 启动 -->
        <template v-slot:available="{ data }">
            <el-switch
                v-model="data.available"
                active-color="#13ce66"
                :active-value="1"
                :inactive-value="0"
                inactive-color="#BFBFBF">
            </el-switch>
        </template>
        <!-- 操作 -->
        <template v-slot:operation="{ data }">
            <el-button type="primary" @click="handleEdit(data)">编辑</el-button>
            <el-button type="primary" @click="handleDelete(data.id)">删除</el-button>
        </template>
         </myTable>
        <!-- 删除弹框 -->
        <el-dialog title="删除" class="del-box" :visible.sync="dialogTableVisible" width="30%">
            <p>删除这条记录？</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false" size="medium">取 消</el-button>
                <el-button type="primary" @click="getSubmit" size="medium">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑弹框 -->
        <el-dialog title="编辑banner" class="edit-box" :visible.sync="dialogEditVisible" width="30%">
            <el-form :model="editForm">
                <el-form-item label="名称：" :label-width="formLabelWidth">
                    <el-input v-model="editForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上传：" :label-width="formLabelWidth">
                    <!-- <el-upload
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :disabled="uploadBoolean"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="editForm.fileUrl" :src="editForm.fileUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div class="el-upload__tip" slot="tip">支持jpg/png格式，RGB模式，尺寸：1920x300px，大小不超过20M</div>
                        
                        <span v-if="editForm.fileUrl" class="el-upload-list__item-actions">
                            <span class="upload-icon">
                                <span class="el-uploads-span" style="margin-right: 10px;" @click="oploadImgPre">
                                    <i class="el-icon-zoom-in"></i>
                                </span>
                                <span class="el-upload-span" @click="oploadImgDel">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </span>
                        <el-dialog v-model="oploadDialogVisible" size="tiny">
                            <img width="100%" :src="editForm.fileUrl" alt="">
                        </el-dialog>
                    </el-upload> -->
                    <imageUpload @getUrl="getUrl"></imageUpload>
                </el-form-item>
                <el-form-item label="启用：" :label-width="formLabelWidth">
                    <el-switch
                        v-model="editForm.enable"
                        active-color="#13ce66"
                        inactive-color="#BFBFBF">
                        </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="getForm" size="medium">提交</el-button>
            </div>

        </el-dialog>
        <!-- 添加分类 -->
        <el-dialog title="添加banner" class="edit-box" :visible.sync="dialogAddVisible" width="30%">
            <el-form :model="addForm" :rules="addRules" ref="addForm">
                <el-form-item label="名称：" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="addForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上传：" :label-width="formLabelWidth" prop="picturePath">
                    <imageUpload @getUrl="getUrl"></imageUpload>
                </el-form-item>
                <el-form-item label="启用：" :label-width="formLabelWidth">
                    <el-switch
                        v-model="addForm.available"
                        active-color="#13ce66"
                        inactive-color="#BFBFBF"
                        active-value="1"
                        inactive-value="0"
                        >
                        </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="getForm('addForm')" size="medium">提交</el-button>
            </div>

        </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getToken } from "@/utils/auth";
import imageUpload from "@/components/imageUpload"
import {allBanner,deleteBanner,addBanner} from "@/api/home"
export default {
    components:{
        imageUpload
    },
  data () {
    //这里存放数据
    return {
        paramsbox:{
            available: 0,
            creatorId: "",
            id: 0,
            modifierId: "",
            name: "",
            pageNo: 1,
            pageSize: 20,
            picturePath: "",
            size: ""
        },
        tableconfig: {
            loading: false,
            isselection: false,
            ispagination: true,
            tabledata: [
            ],
            isindex: true,
            thead: [
                { sort: null, label: '序列号', prop: 'id', width: 100 },
                { sort: null,  prop: 'name',label: '名称',  width: 150 },
                { sort: null, label: '图片', prop: 'picture', type: 'slot', width: 250 },
                { sort: null, label: '图片路径', prop: 'picturePath',type: 'slot'},
                { sort: null, label: '尺寸（px）', prop: 'size', width: 120 },
                { sort: null, label: '是否启用', prop: 'available',type: 'slot', width: 100,},
                { sort: null, label: '操作', prop: 'operation',type: 'slot',width: 200  }, 
            ],
            currentpage: 1,
            pagesize: 0,
            total: 0,
        },
        dialogTableVisible:false,
        dialogEditVisible:false,
        dialogAddVisible:false,
        uploadBoolean:false,
        oploadDialogVisible:false,
        editForm:{
            name:'',
            picturePath:'',
            available:0,
            size:'1920 * 300'
        },
        addForm:{
            name:'',
            picturePath:'',
            available:0,
            size:'1920 * 300'
        },
        addRules:{
            name: [
                { required: true, message: '请输入名称', trigger: 'blur' },
            ],
            picturePath: [
                { required: true, message: '请上传banner', trigger: 'blur' },
            ],
        },
        formLabelWidth:'120px'
    };
  },
  //监听属性 类似于data概念
  computed: {
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleSelectChange(section) {
        this.selectrow = section;
    },
    handleDelete(id){
        console.log(id,'id');
        this.paramsbox.id = id
        this.dialogTableVisible = true;
    },
    handleEdit(data){
        // console.log(id,'id');
        this.editForm = data;
        this.dialogEditVisible = true;
    },
    getSubmit(){
        deleteBanner({id:this.paramsbox.id}).then(res=>{
            console.log(res);
            if(res.success == true){
                this.dialogTableVisible = false; 
                this.doQuery();
            }else{
                this.$message.error(res.message)
            }
        })
    },
    getForm(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.addForm,'this.addForm');
            addBanner(this.addForm).then(res=>{
                if(res.code == 200){
                    this.$message.success('添加成功');
                    this.dialogAddVisible = false;
                    this.doQuery();
                }
            })
           
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    getUrl(url){
        this.addForm.picturePath = url;
        // console.log(this.addForm.fileUrl);
    },
    // handleAvatarSuccess(res, file) {
    //     this.editForm.fileUrl = URL.createObjectURL(file.raw);
    //     if(this.editForm.fileUrl){
    //         this.uploadBoolean = true
    //     }
    // },
    // beforeAvatarUpload(file) {
    //     let types = ['image/jpeg', 'image/jpg', 'image/png'];
    //     const isJPG = types.includes(file.type);
    //     const isLt2M = file.size / 1024 / 1024 < 20

    //     if (!isJPG) {
    //         this.$message.error('上传头像图片只能是 JPG、JPEG、PNG 格式!');
    //     }
    //     if (!isLt2M) {
    //         this.$message.error('上传头像图片大小不能超过 20MB!');
    //     }
    //     return isJPG && isLt2M;
    // },
    oploadImgPre(){
        this.oploadDialogVisible = true
    },
    oploadImgDel(){
        this.editForm.fileUrl = ''
        let _this= this
        setTimeout(function(){
            console.log(_this)
            _this.uploadBoolean = false
        },1000)
    },
    async doQuery() {
        // 获取表格
        this.tableconfig.loading = true;
        this.tableconfig.currentpage = this.paramsbox.pageNo;
        this.tableconfig.pagesize = this.paramsbox.pageSize;
        let data1 = await allBanner(this.paramsbox);
        console.log(data1);
        if(data1.success){
            this.tableconfig.total = data1.result.count;
            this.tableconfig.tabledata = data1.result;
        }
        this.tableconfig.loading = false;
      },


  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.doQuery();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
  },
}
</script>
<style scoped lang="scss">
@import './../../assets/reset.css';
.app-container{
  width: 100%;
  padding: 20px 30px
}
.table-box{
    margin-top: 25px;
}
.blue-link{
    color: #1890FF;
}
.del-box{  
    p{
        line-height: 30px;
        font-size: 20px;
        // font-weight: 600;
        color: #333333;
        text-align: center;
    }  
}
.dialog-footer{
    text-align: center;
    margin-top: 20px;
}
.avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .el-upload-list__item-actions:hover span {
        display: inline-block;
    }
    .el-icon-zoom-in:before {
        content: "\E626";
    }
    .el-icon-delete:before {
        content: "\E612";
    }
    .el-upload-list__item-actions:hover {
        opacity: 1;
    }
    .el-upload-list__item-actions {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: default;
        text-align: center;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0,0,0,.5);
        transition: opacity .3s;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
   .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 150px;
        height: 150px;
        line-height: 150px;
        text-align: center;
    }
    .avatar {
        width: 150px;
        /*height: 150px;*/
        display: block;
    }
    .upload-icon {
        position: absolute;
        top: 50%;
        margin-left: -28px;
        margin-top: -18px;
    }
    .dialogBox .el-dialog{
        top: 30% !important;
        width: 30%;
    }

</style>